<template>
  <div class="aui-card-list">
  <uni-list-query-card :queryShow="queryShow" @query-click="getDataList()" @click="(e)=>{this.queryShow=e}" @searchReset="searchReset()">
      <el-col :span="5">
        <el-form-item :label="$t('logLogin.creatorName')">
          <el-input v-model="dataForm.creatorName" :placeholder="$t('logLogin.creatorName')" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item :label="$t('logLogin.status')">
            <el-select v-model="dataForm.status" :placeholder="$t('logLogin.status')" clearable>
              <el-option :label="$t('logLogin.status0')" :value="0"></el-option>
              <el-option :label="$t('logLogin.status1')" :value="1"></el-option>
              <el-option :label="$t('logLogin.status2')" :value="2"></el-option>
            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="登录时间">
            <el-date-picker v-model="dataForm.bDate" type="date" :placeholder="$t('beginDate')"
              value-format="yyyy-MM-dd" style="width: 160px">
            </el-date-picker>
            -
            <el-date-picker v-model="dataForm.eDate" type="date" :placeholder="$t('endDate')" value-format="yyyy-MM-dd"
              style="width: 160px">
            </el-date-picker>
          </el-form-item>
      </el-col>
  </uni-list-query-card>
    <el-card shadow="never" class="aui-card-list-body">
      <vxe-toolbar :setting="{immediate:true}">
        <template v-slot:buttons>
        </template>
        <template v-slot:tools>
          <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
          <el-dropdown trigger="click" style="padding-left: 5px;" placement="bottom">
            <el-button icon="el-icon-download" circle>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-bottom" @click.native="exportHandle(true)">导出当前页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-download" @click.native="exportHandle()">全部导出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </vxe-toolbar>
      <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize remote-sort
        @sort-change="dataListSortChangeHandle" class="vxe-table-element">
        <vxe-table-column type="index" width="50" align="center"></vxe-table-column>
        <vxe-table-column field="creatorName" title="logLogin.creatorName">
        </vxe-table-column>
        <vxe-table-column field="deptName" title="logLogin.deptName" align="center"></vxe-table-column>
        <vxe-table-column field="ip" title="logLogin.ip" width="120" align="center"></vxe-table-column>
        <vxe-table-column field="userAgent" title="logLogin.Browser">
          <template slot-scope="scope">
            {{ userAgent(scope.row.userAgent).browser }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="userAgent" title="logLogin.OS">
          <template slot-scope="scope">
            {{ userAgent(scope.row.userAgent).os }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="operation" title="logLogin.operation" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.row.operation === 0 ? $t('logLogin.operation0') : $t('logLogin.operation1') }}
          </template>
        </vxe-table-column>
        <vxe-table-column field="status" title="logLogin.status" sortable width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('logLogin.status0') }}</el-tag>
            <el-tag v-else-if="scope.row.status === 1" size="small" type="success">{{ $t('logLogin.status1') }}</el-tag>
            <el-tag v-else size="small" type="warning">{{ $t('logLogin.status2') }}</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column field="createDate" title="logLogin.createDate" sortable width="140" align="center">
        </vxe-table-column>
      </vxe-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { fnUserAgent } from '@/utils/ua'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/log/login/page',
        getDataListIsPage: true,
        exportURL: '/sys/log/login/export'
      },
      dataForm: {
        creatorName: '',
        status: '',
        bDate: this.$formatDate(new Date()),
        eDate: null
      }
    }
  },
  methods: {
    // 识别设备
    userAgent (userAgent) {
      return fnUserAgent(userAgent)
    }
  }
}
</script>
